<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<title>历史轨迹</title>
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="/scriptZIP/flatpickr.min.css">

	<style>
		#container {
			width: 100%;
			height: calc(105vh - 40px);
		}

		body {
			overflow-y: hidden;
		}

		.tool {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 100;
			background-color: azure;
			width: 100%;
		}

		input {
			width: 25%;
		}
	</style>


</head>

<body>
	<div class="header">
		<div class="header_title">轨迹详情</div>
		<a onclick="history.back()">
			<img src="image/return.png" alt="" class="return">
		</a>
	</div>
	<div style="height: 40px;"></div>

	<div style="position: relative;">
		<div id="container"></div>
		<div class="tool" id="tool">
			<input placeholder="日期" id="date">
			<input placeholder="开始时间" id="time">
			<input placeholder="结束时间" id="time1">
			<button id="search">搜索</button>
		</div>
	</div>

	<script src="/scriptZIP/qs.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>

	<script src="/scriptZIP/flatpickr.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>

	<script src="/scriptZIP/flatpickr.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>


	<script src="https://webapi.amap.com/maps?v=2.0&key=d3d68f711955b0418e1d9c6aa88b1d39&plugin=AMap.Driving"></script>

	<script src="/js/common.js"></script>

	<script>
		window._AMapSecurityConfig = {
			serviceHost: location.origin + '/_AMapService'
		}

		var busId = params().id;
		var prefix = isTeacher() ? '/t' : '/s';
		var polyline;
		var mass;

		var map = new AMap.Map('container', {
			zoom: 17
		});

		var o = {
			date: dayjs().format('YYYY-MM-DD')
		};
		var config = {
			enableTime: true,
			noCalendar: true,
			dateFormat: 'H:i',
			time_24hr: true,
		};

		flatpickr('#date', {
			defaultDate: new Date(),
			onChange: function (selectedDates, dateStr, instance) {
				o.date = dateStr;
			}
		});

		flatpickr('#time', Object.assign({
			onChange: function (selectedDates, dateStr, instance) {
				o.time = dateStr;
			}
		}, config));

		flatpickr('#time1', Object.assign({
			onChange: function (selectedDates, dateStr, instance) {
				o.time1 = dateStr;
			}
		}, config));


		function toPath(data) {
			if (data.length == 0) return [];
			var last = data.shift();
			var a = [[last.lng, last.lat]];
			data.forEach(function (it) {
				if (it.lng == last.lng && it.lat == last.lat) return;
				last = it;
				a.push([last.lng, last.lat]);
			});
			return a;
		}

		document.getElementById('search').onclick = function () {
			if (!(o.date && o.time && o.time1)) {
				alert('请选择日期和时间段');
				return;
			}

			axios.get(prefix + '/track/' + busId, {
				params: o
			}).then(function (res) {
				if (polyline) map.remove(polyline);
				if (mass) mass.clear();
				var path = toPath(res.data);
				if (path.length < 2) return;
				polyline = new AMap.Polyline({
					path: path,
					borderWeight: 3,
					strokeColor: 'green',
					lineJoin: 'round',
					showDir: true
				});
				map.add(polyline);


				map.setCenter(path[0]);

				var style = [{
					url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
					anchor: new AMap.Pixel(6, 6),
					size: new AMap.Size(11, 11)
				}, {
					url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
					anchor: new AMap.Pixel(4, 4),
					size: new AMap.Size(7, 7)
				}, {
					url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
					anchor: new AMap.Pixel(3, 3),
					size: new AMap.Size(5, 5)
				}];

				var data = res.data.map(function (it) {
					return {
						lnglat: [it.lng, it.lat],
						name: dayjs(it.time).format('HH:mm:ss'),
						id: 1,
						style: 1
					};
				});

				mass = new AMap.MassMarks(data, {
					cursor: 'pointer',
					style: style
				});
				mass.setMap(map);

			});
		};

	</script>

</body>

</html>